<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>登录页面</title>  
    <style>  
        /* 简单的样式，你可以根据需要自定义 */  
        body{
            margin: 0px;
            padding: 0px;
        }
        .body {  
            font-family: Arial, sans-serif;  
            width: 100vw;
            height: 100vh;
            margin: 0px;
            /* margin-top: -10%; */
            padding:0px;
            background-position:0px -80px;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-image: url('/static/images/beijing-login.jpg');
        }  
        .container {  
            position: absolute;
            top:30%;
            left:65%;
            margin-top: -115px;
            margin-left: -200px;
            width: 400px;  
            height: 360px;
            margin: 0 auto;  
            padding: 20px;
            opacity: 1;
            background: rgba(204, 204, 204, 0.6);
            backdrop-filter: blur(30px);
        }  
        .font-wenzi{
            position: absolute;
            top:30%;
            left:25%;
        }
        .font-wenzi h1{
            margin-top: 50px;
            font-size: 75px;
            text-align: center;
            color: #fff;
            text-shadow:   
            -1px -1px 3px black,  /* 左上角 */  
            1px -1px 3px black,   /* 右上角 */  
            -1px 1px 3px black,   /* 左下角 */  
            1px 1px 3px black;    /* 右下角 */
        }
        .font-wenzi h3{
            margin-top:30px;
            font-size: 55px;
            color: #fff;
            text-shadow:   
            -1px -1px 3px black,  /* 左上角 */  
            1px -1px 3px black,   /* 右上角 */  
            -1px 1px 3px black,   /* 左下角 */  
            1px 1px 3px black;    /* 右下角 */
        }
        h2 {  
            text-align: center;  
            letter-spacing: 5px;
            font-size: 32px;
            font-weight: 400;
            letter-spacing: 7px;
            color: rgba(0, 0, 0, 1);
            vertical-align: top;

        }  
        form{
            text-align: center;
        }
        .form-group {  
            text-align: center;
            margin-bottom: 20px; /* 增加间距 */  
        }  
        label, input[type="submit"] {  
            display: block;  
            margin-bottom: 10px;  
        }  
        input[type="text"], input[type="password"] {  
            width: 70%;
            line-height: 40px;
            height: 40px;
            padding: 10px;  
            border-radius: 2px;  
            border: 1px solid #aaa;
            color:#000;
            font-size: 18px;
            /* background-color: rgba(255,255,255,0.1); */
            background-repeat: no-repeat;
            background-size: 25px 25px;
            background-position: 15px 15px;
            font-weight: bold;
            text-indent: 40px;
            background-color: rgba(240, 240, 240, 1);
            
        }  
        input[type="text"]{
            background-image: url('/static/images/username.png');
        }
        input[type="password"]{
            background-image: url('/static/images/password.png');
        }
        input[type="submit"],input[type="button"] {  
            width: 80%; 
            /* 让按钮和输入框宽度相同，或根据需求自定义宽度 */  
            /* max-width: 200px;  */
            /* 如果希望限制按钮最大宽度 */  
            background-color: #00A2E9;  
            color: white;  
            border: 1px solid #00A2E9;
            border-radius: 15px;
            padding: 10px 20px;  
            cursor: pointer;  
            margin:5px auto;
            font-size: 18px;
            font-weight: bold;
        }  
    </style>  
</head>  
<body>  
    <div class="body">
        <div class="font-wenzi">
            <h1>一飞传媒</h1>
            <h3>关键词查询系统</h3>
        </div>
        <div class="container">  
            <h2>用户登录</h2>  
            <form action="/index/login" method="post">  
                <div class="form-group">  
                    <input type="text" id="username" name="username" placeholder="请输入账号" required>  
                </div>  
                <div class="form-group">  
                    <input type="password" id="password" name="password" placeholder="请输入密码" required>  
                </div>  
                <!-- <input type="button" onclick="location.href='/index/register'" value="注册">   -->
                <!-- <br/> -->
                <input type="submit" value="登录">
                <!-- <br> -->
                <input type="button" onclick="location.href='/index/register'" value="注册">
            </form>  
        </div>  
    </div>
</body>  
</html>